import type { CheckboxProps } from "antd"
import { Checkbox } from "antd"
import { FC } from "react"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"

const CheckboxGroup = Checkbox.Group

interface Option {
	label: string
	value: any
}

interface ProxyQueryRangeProps {
	options: Option[]
	checkedList: any[]
	setCheckedList: (value: any[]) => void
}

export const ProxyQueryRange: FC<ProxyQueryRangeProps> = ({ options, checkedList, setCheckedList }) => {
	const { formatMessage } = useLocale()

	const checkAll = options.length === checkedList.length

	const onChange = (list: any[]) => {
		setCheckedList(list)
	}

	const onCheckAllChange: CheckboxProps["onChange"] = (e: any) => {
		setCheckedList(e?.target?.checked ? options.map(g => g.value) : [])
	}

	return (
		<SFormItem name="queryRange" label="代理:" valuePropName="checked">
			<Checkbox onChange={onCheckAllChange} checked={checkAll}>
				{formatMessage({ id: "report.select_all" })}
			</Checkbox>
			<CheckboxGroup options={options.map(g => ({ label: g.label, value: g.value }))} value={checkedList} onChange={onChange} />
		</SFormItem>
	)
}
